import React, { Component } from 'react'
import './detailPage.scss'
import moonDark from '../../common/images/moon_dark.png'
import monnLight from '../../common/images/moon_light.png'
import arrowLeft from '../../common/images/arrow_left.png'
import arrowLeft2 from '../../common/images/arrow_left2.png'
import { Link } from 'react-router-dom';

//导入本地数据
import { data } from '../../common/js/data.js'

class DetailPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            mode: localStorage.getItem("mode") || 1, // 1 dark 2 light
            detailplus: {
                img: '',
                name: '',
                native_name: '',
                tld: '',
                population: '',
                currentcies: '',
                region: '',
                languages: '',
                subregion: '',
                capital: '',
                borders: [],
            },
        }
    }

    componentWillMount() {
        console.log(this.props.location.state)
        for (var i = 0; i < data.length; i++) {
            if (data[i].name.common == this.props.location.state) {
                // console.log(data[i].name.nativeName[Object.keys(data[i].name.nativeName)[0]].common);
                var detail = data[i]
                this.setState({
                    detailplus: {
                        img: detail.flags.png,
                        name: detail.name.common,
                        native_name: detail.name.nativeName[Object.keys(detail.name.nativeName)[0]].common,
                        tld: detail.tld,
                        population: detail.population,
                        currentcies: detail.currencies[Object.keys(detail.currencies)[0]].name,
                        region: detail.region,
                        languages: detail.languages[Object.keys(detail.languages)[0]],
                        subregion: detail.subregion,
                        capital: detail.capital[0],
                        borders: detail.borders || [],
                    }
                })
                break
            }
        }
    }

    componentDidMount() { // 生命周期 类似mounted

    }

    changeMode() {
        if (this.state.mode === 1) {
            this.setState({mode: 2})
            localStorage.setItem("mode", 2);
        } else {
            this.setState({mode: 1})
            localStorage.setItem("mode", 1);
        }
    }

    render() {
        const {mode, detailplus} = this.state
        return (
            <div className={["detail-page", mode === 1 ? '' : 'light'].join(' ')}>
                <div className="header acea-row">
                    <div className="main-row acea-row row-between-wrapper">
                        <div className="nav-title">Where in the world</div>
                        <div className="acea-row row-middle mode-btn" onClick={this.changeMode.bind(this)}>
                            {mode === 1 ? <img className="moon" src={moonDark}/> : <img className="moon" src={monnLight}/>}
                            <div>Dark Mode</div>
                        </div>
                    </div>
                </div>
                <div className="main-row">
                    <div>
                        <Link to="/" className="back-btn acea-row row-center-wrapper">
                            <img className="back-arrow" src={mode === 1 ? arrowLeft : arrowLeft2}/>
                            <div>Back</div>
                        </Link>
                    </div>


                    <div className="details-wrap acea-row row-between-wrapper">
                        <img src={detailplus.img} className="details-left"/>
                        <div className="details-right">
                            <div className="falg-title">{detailplus.name}</div>
                            <div className="acea-row row-between-wrapper">
                                <div className="flag-row">Navtive Name: <span>{detailplus.native_name}</span></div>
                                <div className="flag-row r">Top Level Domain: <span>{detailplus.tld}</span></div>
                            </div>
                            <div className="acea-row row-between-wrapper">
                                <div className="flag-row">Population: <span>{detailplus.population}</span></div>
                                <div className="flag-row r">Currencies: <span>{detailplus.currentcies}</span></div>
                            </div>
                            <div className="acea-row row-between-wrapper">
                                <div className="flag-row">Region: <span>{detailplus.region}</span></div>
                                <div className="flag-row r">Languages: <span>{detailplus.languages}</span></div>
                            </div>
                            <div className="acea-row row-between-wrapper">
                                <div className="flag-row">Sub Region: <span>{detailplus.subregion}</span></div>
                                <div className="flag-row r"><span></span></div>
                            </div>
                            <div className="acea-row row-between-wrapper">
                                <div className="flag-row">Capital: <span className="detail-value">{detailplus.capital}</span></div>
                            </div>
                            <div className="acea-row border-countries row-middle">
                                <span>Border Countries: </span>
                                <div className="acea-row">
                                    {detailplus.borders.map((item, index) =>
                                        <div className="tag acea-row row-center-wrapper">{item}</div>)}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default DetailPage
